<template>
  <el-row style="padding: 5px">
    <el-row>
      <el-card>
        <el-form :inline="true" :model="formInline" class="" size="small">
          <el-form-item label="店铺名称">
            <el-input v-model="formInline.shop" placeholder="请输入店铺名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
            <el-button type="" icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" plain icon="el-icon-plus" @click="addShopData(1)" v-hasPermi="['agriculture:shop:add']">新增</el-button>
            <button_disbable style="margin-right: 10px"></button_disbable>
            <!--            <el-button type="warning" plain icon="el-icon-download">导出</el-button>-->
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
    <el-row style="margin-top: 5px">
      <el-card>
        <el-table :data="tableData.slice((currentPage -1) *pageSize,currentPage*pageSize)" border style="width: 100%">
          <el-table-column align="center" prop="shopName" label="店铺名称" ></el-table-column>
          <el-table-column align="center" prop="shopType" label="店铺类型">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.shopType === '1'" type="success">线上</el-tag>
              <el-tag v-else type="warning">线下</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="shopImg" label="店铺图片">
            <template slot-scope="scope">
              <div @click="showImg(scope.row.shopImg)">
                <img :src="scope.row.shopImg"  alt="店铺图片" style="width: 50px; height: 50px;">
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="shopAddress" label="店铺地址"></el-table-column>
          <el-table-column align="center" prop="shopContacts" label="店铺联系人"></el-table-column>
          <el-table-column align="center" prop="shopTel" label="店铺联系方式"></el-table-column>
          <el-table-column align="center" prop="shopUrl" label="店铺链接">
            <template slot-scope="scope">
              <el-link type="primary" @click="goToUrl(scope.row.shopUrl)">店铺链接</el-link>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" label="是否可用">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="" label="操作" width="280">
            <template slot-scope="scope">
              <el-button type="warning" icon="el-icon-edit" class="mini_Button" @click="updataShopData(scope.row,1)" v-hasPermi="['agriculture:shop:edit']">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" class="mini_Button" @click="deleteShopData(scope.row.shopId)" v-hasPermi="['agriculture:shop:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin: 20px 0; float: right"
          :current-page.sync="currentPage"
          background
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="this.tableData.length">
        </el-pagination>
      </el-card>
    </el-row>
    <el-dialog title="店铺图片" :visible.sync="dialogVisible" width="15%">
      <img :src="this.img" style="width: 200px;height: 200px">
    </el-dialog>

    <el-drawer
      :visible.sync="drawer" direction="rtl" size="35%">
      <template v-slot:title>
        <div style="color: black;font-weight:1000; font-size: 20px;">{{drawerTitle}}</div>
      </template>
      <el-row style="padding: 0 20px 20px 20px">
        <el-form :model="addShop" class="demo-form-inline">
          <el-form-item>
            <template v-slot:label>
              <i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>店铺名称
            </template>
            <el-input v-model="addShop.shopName" placeholder="请输入店铺名称" class="input_weight"></el-input>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>
              <i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>店铺类型
            </template>
            <el-select v-model="addShop.shopType" placeholder="请选择店铺类型" class="input_weight">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>
              <i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>店铺地址
            </template>
            <el-input v-model="addShop.shopAddress" placeholder="请输入店铺地址" class="input_weight">
              <el-button slot="append" :icon="this.iconDate" @click="popover"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>
              <i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>店铺坐标
            </template>
            <el-input v-model="addShop.shopCoordinate" placeholder="请选择店铺坐标" class="input_weight"></el-input>
            <el-popover
              placement="right" trigger="manual" width="475" v-model="popoverVisible">
              <BaiduMap chart-width="450px" chart-height="300px" @coordinateClicked="handleCoordinateClicked"></BaiduMap>
            </el-popover>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>
              <i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>店铺联系人
            </template>
            <el-input v-model="addShop.shopContacts" placeholder="店铺联系人" style="width: 300px;margin-left: 15px"></el-input>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>
              <i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>店铺联系方式
            </template>
            <el-input v-model="addShop.shopTel" placeholder="店铺联系方式" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>
              <i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>店铺链接
            </template>
            <el-input v-model="addShop.shopUrl" placeholder="店铺链接" class="input_weight"></el-input>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>
              <i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>店铺描述
            </template>
            <el-input   type="textarea" :rows="3"v-model="addShop.shopDes" placeholder="请输入店铺描述" class="input_weight"></el-input>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>
              <i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>
              店铺图片
            </template>
            <el-upload
              ref="upload"
              action="http://117.141.22.134:18080/uploadFile/"
              :auto-upload="false"
              list-type="picture-card"
              :limit="1"
              :on-success="handleUploadSuccess"
              :on-change="handleChange"
              :on-remove="handleRemove"
              style="margin-left: 10px">
              <i :class=" uploadStatus == true ? 'el-icon-close' :'el-icon-plus'"></i>
            </el-upload>
            <span style="font-size: 14px;color: #cccccc">注:图片像素最好改成200px乘200px再上传</span>
          </el-form-item>

        </el-form>
      </el-row>
      <div style="position: absolute; bottom: 20px; right: 20px;">
        <el-button  @click="drawer=false">取消</el-button>
        <el-button type="primary"  @click="handleButtonClick">确定</el-button>
      </div>
    </el-drawer>
  </el-row>
</template>
<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Template from "@/views/iot/template/index.vue";
import Button_disbable from "@/views/agriculture/buttonDis/button_disbable.vue";
import {addShop, delShop, listShop,updateShop} from "@/api/agriculture/shop";
import BaiduMap from "@/views/agriculture/record/MapCharts/baiduMap.vue";

export default {
  components: {BaiduMap, Button_disbable, Template},
  data() {
    const initialAddData={
      shopName:'',
      shopType:'',
      shopImg:'',
      shopAddress:'',
      shopCoordinate:'',
      shopContacts:'',
      shopTel:'',
      shopUrl:'',
      shopDes:'',
      remark:'',
      status:'',
      orderNum:'',
      delFlag:''
    }
    return {
      iconDate:'el-icon-location',
      popoverVisible: false,
      uploadStatus:false,
      options:[
        {
          value:1,
          label:'线上店铺'
        },
        {
          value:2,
          label:'线下店铺'
        }
      ],
      addShop:{...initialAddData},
      initialAddData,
      drawerTitle:'添加店铺',
      currentPage:1,
      pageSize:10,
      drawer:false,
      dialogVisible:false,
      img:'',
      addDataError:'',
      formInline: {
        shop: ''
      },
      shopParams: {
        shopName:'',
      },
      tableData:[],
      requiredFields :
        {shopName: '请填写店铺名称！', shopType: '请填写店铺类型！', shopAddress: '请填写店铺地址！',
          shopCoordinate: '请选择店铺坐标！', shopContacts: '请填写店铺联系人！', shopTel: '请填写店铺联系方式',
          shopUrl:'请填写店铺链接！',shopDes:'请填写店铺描述'
        }
    }
  },
  async mounted() {
    await this.getShopList()
  },
  methods:{
    popover() {
      this.popoverVisible = !this.popoverVisible
      if(this.popoverVisible)
      {
        this.iconDate='el-icon-remove'
      }
      if(!this.popoverVisible)
      {
        this.iconDate='el-icon-location'
      }
    },
    handleCoordinateClicked({ cityName, provinceName, address, coordinates }) {
      this.addShop.shopAddress=provinceName
      this.addShop.shopCoordinate=coordinates
      this.iconDate='el-icon-success'
    },
    // 抽屉确定按钮选择监听修改或新增
    handleButtonClick() {
      if (this.addOrUpdate === 1) {
        this.updataShopData(this.addShop, 2);
      } else {
        this.addShopData(2);
      }
    },

    // 警告消息
    openMessage(type,mes) {
      this.$notify({
        title: '提示',
        message: mes,
        offset: 30,
        type: type
      });
    },

    // 监听添加图片的动态
    handleRemove(file, fileList) {
      this.uploadStatus=false
    },
    // 监听添加图片的动态
    handleChange(file, fileList) {
      if (file.status === 'ready') {
        this.uploadStatus=true
      };
    },
    // 获取店铺列表
    async getShopList()
    {
      const row = await listShop(this.shopParams)
      this.tableData =row.rows
    },
    async handleUploadSuccess(response, file, fileList) {
      if (response.data.path) {
        const imagePath = response.data.path;
        this.addShop.shopImg = imagePath;
        try {
          await addShop(this.addShop);
        } catch (error) {
          console.error('Error occurred while adding sellpro:', error);
          this.addDataError=1
        }
      }
    },
    // 添加店铺
    async addShopData(buttonId) {
      if(buttonId == 1) {this.addShop = { ...this.initialAddData };this.drawerTitle ='添加溯源产品';this.drawer = true; this.addOrUpdate = 0}
      else if(buttonId == 2){
        for (let field of Object.keys(this.requiredFields)) {
          if (!this.addShop[field]) {
            this.openMessage('warning', this.requiredFields[field]);
            return;
          }
        }
        if(!this.uploadStatus){
          this.openMessage('warning', '请选择图片！');
          return;
        }
        await this.$refs.upload.submit();
        if(!this.addDataError)
        {
          this.openMessage('success', '添加成功！');
          await this.getShopList();
          this.drawer = false
        } else {
          this.openMessage('error', '添加失败！');}
      }
    },
    // 修改产品
    async updataShopData(row,buttonId){
      if(buttonId == 1) {this.addShop = {...row} ;this.drawerTitle ='修改店铺信息';this.drawer=true;this.addOrUpdate = 1 }
      else if(buttonId == 2){
        for (let field of Object.keys(this.requiredFields)) {
          if (!this.addShop[field]) {
            this.openMessage('warning', this.requiredFields[field]);
            return;
          }
        }
        try {
          await updateShop(this.addShop)
          this.openMessage('success', '修改成功！');
          await this.getShopList()
          this.drawer = false
        }catch (error){
          console.error('Error occurred while update sellpro:', error);
          this.openMessage('error', '修改失败！');
        }
      }
    },
    // 删除店铺
    async deleteShopData(id)
    {
      this.$confirm('确认删除？')
        .then(async _ => {
          try {
            delShop(id)
            this.openMessage('success', '删除成功！');
            await this.getShopList()
          } catch (error) {
            console.log("溯源版本删除错误:", error)
            this.openMessage('error', '删除失败！');
          }
        }).catch(_ => {
        return
      });
    },
    goToUrl(row)
    {
      window.open(row,'_blank')
    },
    showImg(row)
    {
      this.dialogVisible=true;
      this.img=row;
    },
  }
}
</script>
<style scoped>
.mini_Button{
  font-size:11px;
  padding: 4px 9px
}
.input_weight{
  width: 300px;
  margin-left: 29px;
}
</style>

